<template>
    <div class="dropDownContainer">
        <el-dropdown :style="execDropdownClass"
                     :split-button="propJson.splitButton === 'button'"
                     :size="propJson.buttonSize"
                     :type="propJson.splitButton === 'button' ? propJson.buttonType : ''"
                     :disabled="propJson.disabled"
                     :placement="propJson.placement"
                     :trigger="propJson.trigger"
                     :hideOnClick="propJson.hideOnClick"
                     :info="defaultValue"
                     :info2="dropDownValue"
                     @command="handleCommand"
                     size="large">
        <span v-if="propJson.splitButton === 'button'" :style="execButtonClass">
            {{defaultValueData}}
        </span>
            <el-button v-if="propJson.splitButton === 'span'" :type="propJson.buttonType" :style="execButtonClass"
                       :size="propJson.buttonSize" :plain="propJson.isPlain" :color="propJson.isCustomColor ? propJson.customColor : ''">
                {{defaultValueData}}&nbsp;&nbsp;
                <component is="DownOutlined" ></component>
            </el-button>

            <el-avatar v-if="propJson.splitButton === 'avatar' && propJson.avatarUrl !== ''" :size="propJson.avatarSize" :src="propJson.avatarUrl"
                       :shape="propJson.avatarShape" :fit="propJson.avatarFit" class="avatarClass"/>

            <el-avatar v-if="propJson.splitButton === 'avatar' && propJson.avatarUrl === ''" class="avatarClass">Avatar</el-avatar>

            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item v-for="item in dropDownValueList" :key="item.id"
                                      :command="item.command" :disabled="item.dropDownDisable">
                        {{item.value}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script name="MenuDropDownComponent" setup lang="ts">
import {doThirdServiceAction, doThirdServiceValue} from "@/utils/lowcode/thirdService";
import jsonpath from "jsonpath";
import {deepCopy} from "@/utils/ywuCommon";
import {execCustomValue} from "@/utils/commonParamUtil";
import {computed, defineProps, ref} from "vue";
import {useRouter} from "vue-router";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let defaultValueData = ref("");
let dropDownValueList = ref([]);

let router = useRouter();

let execDropdownClass = computed(() => {
    let resStyle = "width: 100%;"
    resStyle += "height: 100%;";
    return resStyle;
})

let execButtonClass = computed(() => {
    let resStyle = "width: 100%;height: 100%;"
    if (propJson.value.editFlag) {
        resStyle += "pointer-events: none;";
    }
    return resStyle;
})

let defaultValue = computed(async () => {
    if (propJson.value.editFlag) {
        return;
    }
    await doThirdServiceValue(propJson.value.defaultActionInfo, commonParam.value, execDefaultThen, execDefaultCatch, null)
})

let dropDownValue = computed(async () => {
    if (propJson.value.editFlag) {
        return;
    }
    await doThirdServiceValue(propJson.value.actionInfo, commonParam.value, execDropDownThen, execDropDownCatch, null)
})

function execDefaultThen(resValue) {
    if (Array.isArray(resValue)) {
        defaultValueData.value = resValue[0]
    } else if (typeof resValue === "string") {
        defaultValueData.value = resValue
    }
}

function execDefaultCatch(resValue) {

}

function execDropDownThen(resValue) {
    dropDownValueList.value = []
    if (Array.isArray(resValue)) {
        // 构建对象
        for (let i = 0; i < resValue.length; i++) {
            let val = resValue[i];
            // 根据配置的jsonPath查询对应的字段数据
            let valInfo = jsonpath.query(val, propJson.value.dropDownJsonPath)
            let valueItem = valInfo[0];
            valueItem = execCustomValue(commonParam.value, valueItem);
            if (!propJson.value.commandField) {
                let obj = {
                    command: "",
                    value: valueItem,
                    dropDownDisable: val.dropDownDisable
                }
                dropDownValueList.value.push(obj);
                continue
            }
            let commandInfo = jsonpath.query(val, propJson.value.commandField)
            let obj = {
                command: commandInfo[0],
                value: valueItem,
                dropDownDisable: val.dropDownDisable
            }
            dropDownValueList.value.push(obj);
        }
    } else if (typeof resValue === "string") {
        dropDownValueList.value[0] = resValue
    }
}

function execDropDownCatch(resValue) {

}

function execChangeThen(awaitObj) {
    // 判断是否需要在下拉改变后重新加载页面
    if (propJson.value.isReloadPage && awaitObj.res) {
        router.go(0)
    }
}

async function handleCommand(command) {
    if (!propJson.value.isAddChangeAction) {
        return
    }
    // 构建内置变量参数
    let commandVariable = propJson.value.commandVariable
    let resList = deepCopy(propJson.value.changeAction)
    for (let i = 0; i < resList.length; i++) {
        let action = resList[i]
        if (!action.apiParamList) {
            action.apiParamList = []
        }
        let pageIndexVariableInfo = {variableName: commandVariable, variableValue: command, type: "custom", variableType: "String", variableParamName: ""}
        action.apiParamList.push(pageIndexVariableInfo)
        // 重置routeTo中的值
        action.routeTo = command;
    }
    // 定义一个标志位，后续同步执行
    let awaitObj = {flag: false, res: true}
    await doThirdServiceAction(resList, awaitObj, commonParam.value, execChangeThen, ()=>{}, awaitObj);
}
</script>

<style scoped lang="less">
.dropDownContainer {
    height: 100%;
}

.avatarClass:hover {
    cursor: pointer;
}
</style>